<template>
  <div id="disputedLitigation">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待处理" name="1"> </el-tab-pane>
      <el-tab-pane label="已处理" name="2"> </el-tab-pane>
    </el-tabs>
    <div class="header">
      <div class="Query">
        <div class="left">
          <el-form class="form">
            <el-form-item>
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="任务办结期限" end-placeholder="任务办结期限"> </el-date-picker>
            </el-form-item>
            <el-form-item v-if="activeName == 2">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="处理时间" end-placeholder="处理时间"> </el-date-picker>
            </el-form-item>
            <el-form-item v-if="activeName == 2">
              <el-input v-model="query.companyName" placeholder="请输入任务单号"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="right">
          <!-- <el-button type="primary">立即开具</el-button> -->
        </div>
      </div>
    </div>
    <div class="content">
      <el-table :data="rows" height="100%">
        <el-table-column label="序号" min-width="35">
          <template slot-scope="{ row }">
            <el-checkbox>{{ row.num }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="公司名称" min-width="80"></el-table-column>
        <el-table-column prop="taxOffice" label="主管税务局" min-width="100" />
        <el-table-column prop="month" label="主管税务人员" min-width="60" />
        <el-table-column prop="type" label="任务办结期限" min-width="50" />
        <el-table-column prop="project" label="风险主题" min-width="50" />
        <el-table-column prop="oweTax" label="任务单号"></el-table-column>
        <el-table-column prop="lateFee" label="处理状态"></el-table-column>
        <el-table-column v-if="activeName == 2" prop="paySum" label="处理时间"></el-table-column>
        <el-table-column prop="section" label="消息标题"></el-table-column>
        <el-table-column prop="status" label="消息内容"></el-table-column>
        <el-table-column prop="status" label="消息类型"></el-table-column>
        <el-table-column label="操作">
          <template>
            <!-- <span class="fun">开具</span> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "disputedLitigation",
  created() {
    var date = new Date();
    var month = date.getFullYear() + "-" + (date.getMonth() > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1));
    this.query.month = month;
    this.query1.month = month;
  },
  data() {
    return {
      activeName: "1",
      query: { month: "", keyWord: "", type: "", project: "", status: "" },
      rows: [
        {
          num: 1,
          name: "徐彬",
          workNumber: "10156",
          date: "2022-09",
          idType: "身份证",
          idCard: "412828199905211547",
          children: "- -",
          continue: "- -",
          housing: "- -",
          support: "- -",
          lookAfter: "- -",
          status: "报送成功",
          companyname: "北京云代账",
          updateTime: "2022-09-17 14:32"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
#disputedLitigation {
  padding: 20px;
  .header {
    margin-top: 5px;
    .month {
      font-weight: 900;
      .el-date-editor {
        :deep(.el-input__inner) {
          border-bottom: 0 !important;
          font-size: 19px;
          font-weight: 600;
        }
      }
    }
    .Query {
      margin-top: 15px;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .form {
          display: inline-flex;
          .el-form-item {
            margin-right: 8px;
            .el-date-editor {
              border-top: 0 !important;
              border-right: 0 !important;
              border-left: 0 !important;
            }
          }
        }
      }
    }
  }
  .content {
    .fun {
      color: #31a2f2;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
.el-popover {
  .form {
    padding: 10px 50px 10px 20px;
    display: flex;
    .el-form-item {
      margin-right: 8px;
      margin-top: 18px;

      .el-date-editor {
        border-top: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
      }
    }
  }
}
</style>
